<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 300px;
				height: 300px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn1" onclick="btnOrDivClick()">你点我啊！</button> </br>
		<button type="button" id = 'openDivListener' onclick="addmouse()" >添加监视器</button></br>
		<button type="button" id = 'openDivListener' onclick="removemouse()" >移除监视器</button>
		<div id="div1" onclick="btnOrDivClick()">
			
		</div>
				
		
		
		用户名：<input type="text" name="" id="fname" placeholder="请输入用户名" />
		密码：<input type="text" name="" id="fpassword" placeholder="请输入密码" />
		<input type="submit" value="提交" onclick="return getRuslt()"/>
		
	</body>
	<script type="text/javascript">
		function btnOrDivClick(){
			console.log("=o=!?");
		}
		// document.getElementById("btn1").onclick = btnOrDivClick();
		// document.getElementById("btn1").addEventListener('click',btnOrDivClick());
		// document.getElementById("div1").onclick = btnOrDivClick();
		// document.getElementById("div1").addEventListener('click',btnOrDivClick());
		
		function enterDiv(){
			console.log("OwO~!");
		}
		function leaveDiv(){
			console.log("TwT?");
		}
		document.getElementById("div1").mouseleave = leaveDiv();
		// document.getElementById("div1").addEventListener('mousemove',moveOnDiv);
		
		function moveOnDiv(){
			console.log("移动ing~~");
		}
		
		document.getElementById('fname').onfocus = function(){
			console.log("用户正在输入");
		}
		document.getElementById('fname').onbur = function(){
			var pwd = document.getElementById('fname').value;
			if(pwd == ''){
				alert('没有输入用户名');
			}
		}
		document.getElementById('fpassword').onfocus = function(){
			console.log("用户正在输入");
		}
		document.getElementById('fpassword').onbur = function(){
			var pwd = document.getElementById('fpassword').value;
			if(pwd == ''){
				alert('没有输入密码');
			}
		}
		
		
		function getRuslt(){
			var endName = document.getElementById('fname').value;
			var endPassword = document.getElementById('fpassword').value;
			if((endName == null && endPassword == null)||(endName == '' && endPassword == '')){
				alert('用户名和密码为空');
				return false;
			}
			else if(endName == null||endName == ''){
				alert('用户名为空');
				return false;
			} 
			else if(endPassword == null||endPassword == ''){
				alert('密码为空');
				return false;
			} 
		}
		
		function addmouse(){
		document.getElementById("div1").addEventListener('mousemove',moveOnDiv);
		}
		function removemouse(){
		document.getElementById("div1").removeEventListener('mousemove',moveOnDiv);
		}
	</script>
<!-- 	1.按钮和DIV的单击事件（三种绑定方式）
	2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
	3.登入页面
	用户名输入框，
	密码输入框，
	提交按钮
	
	任务     3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
	         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
	         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
	         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
	         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
	              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
	4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
</html>